export const useKData = () => {
  const upColor = "#ec0000";
  const upBorderColor = "#8A0000";
  const downColor = "#00da3c";
  const downBorderColor = "#008F28";

  const option = ref({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    legend: {
      data: ["日K", "MA5", "MA10", "MA20", "MA30"]
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "5%"
    },
    xAxis: {
      type: "category",
      data: [],
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: "dataMin",
      max: "dataMax"
    },
    yAxis: {
      scale: true,
      splitArea: {
        show: true
      }
    },
    // dataZoom: [
    //   {
    //     show: true,
    //     start: 0,
    //     end: 100
    //   }
    // ],
    series: [
      {
        name: "日K",
        type: "candlestick",
        data: [],
        itemStyle: {
          color: upColor,
          color0: downColor,
          borderColor: upBorderColor,
          borderColor0: downBorderColor
        }
      }

      // {
      //   name: "MA5",
      //   type: "line",
      //   data: calculateMA(5),
      //   smooth: true,
      //   lineStyle: {
      //     opacity: 0.5
      //   }
      // },
      // {
      //   name: "MA10",
      //   type: "line",
      //   data: calculateMA(10),
      //   smooth: true,
      //   lineStyle: {
      //     opacity: 0.5
      //   }
      // },
      // {
      //   name: "MA20",
      //   type: "line",
      //   data: calculateMA(20),
      //   smooth: true,
      //   lineStyle: {
      //     opacity: 0.5
      //   }
      // },
      // {
      //   name: "MA30",
      //   type: "line",
      //   data: calculateMA(30),
      //   smooth: true,
      //   lineStyle: {
      //     opacity: 0.5
      //   }
      // }
    ]
  });

  return {
    option
  };
};
